<template>
  <div id="risk-confirm" v-if="showConfirm">
    <div class="mode1" v-if="mode === 1">
      <header><i class="iconfont iconcha" @click="closeConfirm(0)"></i><span>适当性匹配意见及投资者确认书</span></header>
      <div class="content">
        <p>本人/本机构的风险承受能力等级为<span>[{{riskInfo.riskLevelStr}}]</span>，投资品种包含<span>[{{riskInfo.investKindStr}}]</span>，投资期限至少为<span>[{{riskInfo.investTermStr}}]</span>， 本人/本机构在此确认自身风险承受能力等级及投资目标与本金融产品或服务相匹配。本人/本机构在此确认贵公司及相关员工不存在主动推介与本人风险承受能力或投资目标不相符的产品或服务的行为。本公司建议您审慎考察该产品或服务的特征及风险，风险评估后自行做出投资决定。</p>
        <div class="time"><span>（个人签名/单位印签）</span><span>{{year}} 年 {{month}} 月 {{day}} 日</span></div>
      </div>
      <div class="btn-1" @click="closeConfirm(1)">确定</div>
      <div class="logo"></div>
    </div>
    <div class="mode2" v-else>
      <header><i class="iconfont iconcha" @click="closeConfirm(0)"></i><span>产品或服务风险警示及投资者确认书</span></header>
      <div class="content">
        <p>本人/本机构的风险承受能力等级为<span>[{{riskInfo.riskLevelStr}}]</span>，投资品种包含<span>[{{riskInfo.investKindStr}}]</span>，投资期限至少为<span>[{{riskInfo.investTermStr}}]</span>，本人/本机构在此确认自身风险承受能力等级或投资目标与本金融产品或服务不匹配。70岁以上客户请审慎购买属于中高及以上风险等级的金融产品/金融服务。<br/>本人/本机构在此确认贵公司及相关员工不存在主动推介该项产品或服务的行为。本人/本机构经审慎考虑后，仍坚持了解该项产品或该项服务，并愿意承担可能引起的损失和其他后果。坚持了解该项产品或该项服务的决定，系本人/本机构独立、自主、真实的意思表示，与贵公司及相关从业人员无关。 本公司建议您审慎考察该产品或服务的特征及风险，风险评估后自行做出投资决定。</p>
        <div class="time"><span>（个人签名/单位印签）</span><span>{{year}} 年 {{month}} 月 {{day}} 日</span></div>
      </div>
      <div class="btn-2">
        <div class="btn1" @click="closeConfirm(0)">放弃观看</div>
        <div class="btn2" @click="closeConfirm(1)">接受风险，继续观看</div>
      </div>
      <div class="logo"></div>
    </div>
  </div>
</template>

<script>
export default {
    name: "UserRiskConfirm",
    props: {
      showConfirm: Boolean,
      mode: Number,
      riskInfo: Object
    },
    data() {
      return {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate()
      }
    },
    methods: {
      closeConfirm(flag) {
        if (flag) {
          this.$emit('changeShowConfirm')
        } else {
          this.$router.back()
        }
      }
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  #risk-confirm {
    width 100%
    height 100%
    background #fff
    position fixed
    top 0
    left 0
    .mode1, .mode2 {
      width: 100%
      height: 100%
      header {
        width: 100%
        height 88px
        line-height: 88px
        text-align: center
        font-size: 36px;
        color: #27344B;
        position relative
        font-weight: 500
        white-space: nowrap;
        i {
          position absolute
          top 50%
          left 26px
          transform: translateY(-50%)
          font-size: 32px
          font-weight: 700
        }
      }
      .content {
        width: 690px;
        height: calc(100% - 88px - 40px - 96px - 40px - 68px - 95px - 40px - 40px)
        margin: 40px auto
        overflow-y: scroll
        p {
          color: #333333;
          line-height: 58px;
          text-indent: 2em
          margin-bottom 40px
          span {
            color: #307CFF
          }
        }
        .time {
          display: flex;
          flex-direction: column
          justify-content: space-evenly
          align-items: flex-end
          color: #333333;
          height: 120px
          line-height: 60px;
        }
      }
      .btn-1 {
        width: 630px
        height: 96px
        line-height: 96px
        text-align: center
        margin: 0 auto 40px
        background: #307CFF;
        border-radius: 4px;
        font-size: 36px;
        color: #fff
        white-space: nowrap;
        &:active {
          opacity: .8
        }
      }
      .btn-2 {
        width: 630px
        height: 96px
        margin: 0 auto 40px
        display: flex
        justify-content: space-between
        align-items: center
        white-space: nowrap;
        .btn1, .btn2 {
          width: 48%
          height: 96px
          line-height: 96px
          text-align: center
          background: #EAF1FF;
          border-radius: 4px;
          color #307CFF
          font-size: 28px;
          white-space: nowrap;
        }
        .btn2 {
          background: #307CFF;
          border-radius: 4px;
          color #fff
        }
      }
      .logo {
        width: 324px
        height: 68px
        background: url('../assets/images/zxjt-icon.png') 100%/100% no-repeat;
        margin: 0 auto 95px

      }
    }
  }
</style>
